<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
</head>

<body>
    <input type="button" id="btn" />
    <ul id="ul">
        <li>aaaaaaaa</li>
        <li>bbbbbbbb</li>
        <li>cccccccc</li>
    </ul>

    <script>
        window.onload = function () {
            var oUl = document.getElementById("ul");
            var aLi = oUl.getElementsByTagName("li");
            var oBtn = document.getElementById("btn");
            var iNow = 4;

            oUl.onmouseover = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                //alert(target.innerHTML);
                if (target.nodeName.toLowerCase() == "li") {
                    target.style.background = "red";
                }
            }
            oUl.onmouseout = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                //alert(target.innerHTML);
                if (target.nodeName.toLowerCase() == "li") {
                    target.style.background = "";
                }
            }
            oBtn.onclick = function () {
                iNow++;
                var oLi = document.createElement("li");
                oLi.innerHTML = 1111 * iNow;
                oUl.appendChild(oLi);
            }
        }
    </script>
</body>

</html>